<template>
  <div>
    <a-button @click="addParams">增加</a-button>
    <a-button @click="paramsImportDlgVisible = true"
      >从其他物模型中导入</a-button
    >
    <a-modal
      title="导入设备参数"
      :visible="paramsImportDlgVisible"
      @ok="importParamsTo()"
      @cancel="paramsImportDlgVisible = false"
    >
      <a-select v-model="curModelID" @change="onModalSelected" style="width: 60%">
        <a-select-option
          v-for="(item, index) in tmodels"
          :key="index"
          :value="item.uid"
          >{{ item.s_name }}</a-select-option
        >
      </a-select>
      <a-table
        :data-source="curParams"
        :columns="pcolumns"
        :rowKey="(record) => record.identifier"
         :row-selection="rowSelection"
      ></a-table>
    </a-modal>
    <a-modal
      title="参数"
      :visible="paramsDlgVisible"
      @ok="editParams()"
      @cancel="paramsDlgVisible = false"
    >
      <div>
        <a-form-model :labelCol="{ span: 4 }" :wrapperCol="{ span: 12 }">
          <a-form-model-item label="名称">
            <a-input v-model="param.name" style="width: 80%"></a-input>
          </a-form-model-item>
          <a-form-model-item label="id">
            <a-input
              v-model="param.identifier"
              style="width: 80%"
              :disabled="!isNew"
            ></a-input>
          </a-form-model-item>
          <a-form-model-item label="默认值">
            <a-input v-model="param.default" style="width: 80%"></a-input>
          </a-form-model-item>
          <a-form-model-item label="正则表达式">
            <a-input v-model="param.regular" style="width: 80%"></a-input>
          </a-form-model-item>
        </a-form-model>
        <data-type-base
          :typeHasArray="false"
          :typeHasStruct="false"
          :labelCol="{ span: 4 }"
          :wrapperCol="{ span: 12 }"
          :dataType="param.data_type"
        ></data-type-base>
      </div>
    </a-modal>

    <a-table
      :data-source="params"
      :columns="pcolumns"
      :rowKey="(record) => record.identifier"
    >
      <template slot="operation" slot-scope="text, record">
        <a-space>
          <span><a @click="editParam(record)">编辑</a></span>
          <span><a @click="deleteParam(record)">删除</a></span>
        </a-space>
      </template>
    </a-table>
  </div>
</template>
<script>
import DataTypeBase from "./DataTypeBase.vue";
const pcolumns = [
  {
    title: "名称",
    dataIndex: "name",
    width: "20%",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "ID",
    dataIndex: "identifier",
    width: "20%",
    scopedSlots: { customRender: "identifier" },
  },
  {
    title: "类型",
    dataIndex: "data_type.type",
    width: "20%",
  },
  {
    title: "默认值",
    dataIndex: "default",
    width: "20%",
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
  },
];
export default {
  props: ["params"],
  components: {
    DataTypeBase,
  },
  computed: {
    tmodels() {
      return this.$store.state.tmodel.tmodels;
    },
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows,this);
          this.selParams = selectedRows
        },
        getCheckboxProps: record => ({
          props: {
            name: record.name,
          },
        }),
      };
    },
  },
  data() {
    return {
      pcolumns,
      curModelID: "",
      paramsDlgVisible: false,
      isNew: false,
      param: { data_type: { specs: {} } },
      editingKey: "",
      paramsImportDlgVisible: false,
      curParams: [],
      selParams:[],
    };
  },
  methods: {
    addParams() {
      this.param = { data_type: { specs: {}, type: "int" }, defualt: "" };
      this.isNew = true;
      this.paramsDlgVisible = true;
    },
    importParamsTo(){
      let self = this
      this.selParams.forEach(p => {
        let oldp = self.params.find(param=>{
          return param.identifier === p.identifier
        })
        if(!oldp){
          self.params.push(p)
        }
      });
      this.paramsImportDlgVisible = false
    },
    editParams() {
      if (this.isNew) {
        this.params.push(this.param);
      } else {
        const index = this.params.findIndex((p) => {
          return p.identifier === this.param.identifier;
        });
        if (index >= 0) {
          this.$set(this.params, index, this.param);
        }
      }
      this.paramsDlgVisible = false;
    },
    editParam(record) {
      this.isNew = false;
      if (record.defualt == undefined) {
        record.defualt = "";
      }
      this.param = JSON.parse(JSON.stringify(record));
      this.paramsDlgVisible = true;
    },
    deleteParam(record) {
      const index = this.params.findIndex((p) => {
        return p.identifier === record.identifier;
      });
      if (index >= 0) {
        this.params.splice(index, 1);
      }
    },
    onModalSelected(){
      let self = this
      this.curParams = []
      this.selParams = []
      let tm = this.$store.state.tmodel.tmodels.find(m=>{
        return m.uid === self.curModelID
      })
      if(tm){
        console.log("***********",tm)
        let body = JSON.parse(tm.body)
        if(body){
          this.curParams = body.params
        }
      }
      
    }
  },
};
</script>
